<template>
	<view class="banner">
		<view class="banner_nr">
			<view class="banner_top">
				<image src="@/static/images/Home/homeSom/icon/icon-safety.png" class="safaty"></image>
				<span>安全保障中</span>
			</view>
			<view class="textOne">300,245,239 KOI</view>
			<view class="textTwo">可用3424029U | 冻结32372</view>
		</view>
	</view>
	<view class="trade">
		<view class="title">交易记录</view>
		<view class="list">
			<view class="item" v-for="(item,index) in transactionHistory" :key="index+1">
				<view class="name">{{item.remark}}</view>
				<view class="time">{{item.createTime}}</view>
				<view :class="'num ' + (item.amount>=0?'correct':'negative')"><template
						v-if="item.amount >=0">+</template>{{item.amount}}</view>
				<view class="tips">{{ }}</view>
			</view>
		</view>
	</view>
	<view class="isolation"></view>
	<view class="footer">
		<button class="btn" @click="acquisition()">提现</button>
		<button class="btn2" @click="acquisition1()">充值</button>
	</view>
	<!-- 提现 -->
	<PaymentSuccess :statePay="Payouts" @closePaySuccess="closePaySuccess()">
		<template v-slot:title>
			<view class="ejectTitle">
				<span>提现</span>
				<image @click='closePaySuccess()' src='@/static/images/Home/no.png' class="no"></image>
			</view>
		</template>
		<template v-slot:cont>
			<view class="ejectCont">
				<view class="title">选择币种</view>
				<button class="Buy_now">
				</button>
				<view class="title">提现数量</view>
				<input class="ContItem" v-model="PayVal" />
				<view class="tips">
					<span>手续费：{{5}}USDT</span>
					<span>余额：{{worth}}USDT</span>
				</view>
				<view class="title">收款地址</view>
				<input class="ContItem" v-model="PayAddress" />
				<view class="title">安全密码</view>
				<van-field id="pass" v-model="Paypwd" :type="pwd? 'password':'text'" @click-right-icon='Show'
					@input="changeValue">
					<template #right-icon>
						<van-icon v-if="pwd" name="eye-o" color="#848496" size='20' />
						<van-icon v-else name="closed-eye" color="#848496" size='20' />
					</template>
				</van-field>
				<view class="tipsRed">忘记密码?</view>
			</view>
			<view class="bottoms">
				<view class="bottomsNum">{{worth}}
					<span>USDT</span>
				</view>
				<view class="bottomsBtn" @click="spending">确认提现</view>
			</view>
		</template>
	</PaymentSuccess>
	<!-- 充值 -->
	<PaymentSuccess :statePay="recharge" @closePaySuccess="closePaySuccess()">
		<template v-slot:title>
			<view class="ejectTitle">
				<span>充值</span>
				<image @click='closePaySuccess()' src='@/static/images/Home/no.png' class="no"></image>
			</view>
		</template>
		<template v-slot:cont>
			<view class="ejectCont">
				<view class="title">选择币种</view>
				<button class="Buy_now">
				</button>
				<view class="title">充值地址</view>
				<view class="bg">
					<view class="top"><span>{{address}}</span><img @click='Copys' class="copy"
							src="@/static/images/Home/btn-copy.png" alt="copy"></view>
					<view class="imgs">
						<QRCode :addressVal='address' />
					</view>
					<view class="btns1" @click="saveImg">保存到相册</view>
				</view>
			</view>
		</template>
	</PaymentSuccess>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	import PaymentSuccess from '../eject/eject.vue';
	import { copy } from '@/utils/copy.ts';
	import QRCode from '@/components/QRCode/index.vue';
	import { getAssetDetails, withdrawalRequests, getCoinAddress, getCoinDetailList } from '@/api/userAssets';
	import { onLoad } from '@dcloudio/uni-app';
	import { showNotify } from 'vant';
	let Payouts = ref<boolean>(false)
	let recharge = ref<boolean>(false)
	// 用户自己的充值地址
	const address = ref<string>('234533')
	// USDT总值
	const worth = ref<number>(0)
	// 可用USDT
	const available = ref<number>(0)
	// 冻结USDT
	const freeze = ref<number>(0)
	// 交易列表
	const transactionHistory = ref([])
	// 提现数量
	const PayVal = ref<number>(0)
	// 提现地址
	const PayAddress = ref<string>('')
	// 提现密码
	const Paypwd = ref<string>('')
	// 控制密码的显示
	const pwd = ref<boolean>(true);
	onLoad(async () => {
		var { data } = await getAssetDetails('USDT')
		available.value = data.normalBalance
		freeze.value = data.frozenBalance
		worth.value = freeze.value + available.value
		var CoinDetail = await getCoinDetailList({ symbol: "USDT" })
		transactionHistory.value = CoinDetail.rows
		console.log(transactionHistory.value)
	})
	// 密码的显示切换
	const Show = () => {
		pwd.value = !pwd.value
	}
	// 改变输入框里面的值
	const changeValue = () => {
		console.log(Paypwd.value)
	}
	// 复制地址
	const Copys = () => {
		copy(address.value)
	}
	// 提现
	const spending = async () => {
		const res = await withdrawalRequests({
			symbol: "USDT",
			amount: PayVal.value,
			address: PayAddress.value,
			payPassword: Paypwd.value
		})
		console.log(res.code)
		if (res.code === 500) {
			showNotify({ type: 'danger', message: '参数错误' })
		} else if (res.code === 200) {
			showNotify({ type: 'success', message: '提现成功' })
		}
	}
	// 图片转Base64
	const getBase64Image = (img) => {
		console.log(img.width)
		var canvas = document.createElement('canvas')
		canvas.width = img.width
		canvas.height = img.height
		const ctx = canvas.getContext('2d')
		ctx.drawImage(img, 0, 0, img.width, img.height)
		var ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase()
		var dataURL = canvas.toDataURL('image/' + ext)
		return dataURL
	}
	// 保存图片
	// const saveImg = () => {
	// 	function saveBase64Img(base64) {
	// 		const bitmap = new plus.nativeObj.Bitmap('test');
	// 		bitmap.loadBase64Data(
	// 			base64,
	// 			function () {
	// 				const url = '_doc/' + new Date() + '.png'; // url建议用时间戳命名方式
	// 				console.log('url:', url);
	// 				bitmap.save(
	// 					url, {
	// 					overwrite: true // 是否覆盖
	// 					// quality: 'quality'  // 图片清晰度
	// 				},
	// 					i => {
	// 						uni.saveImageToPhotosAlbum({
	// 							filePath: url,
	// 							success: function () {
	// 								uni.showToast({
	// 									title: '保存成功',
	// 									icon: 'none'
	// 								})
	// 								bitmap.clear();
	// 							}
	// 						});
	// 					},
	// 					e => {
	// 						uni.showToast({
	// 							title: '保存失败',
	// 							icon: 'none'
	// 						})
	// 						console.log(e);
	// 						bitmap.clear();
	// 					}
	// 				);
	// 			},
	// 			e => {
	// 				console.log('保存失败', e);
	// 				bitmp.clear();
	// 			}
	// 		);
	// 	}
	// let img = new Image()
	// 网络图片地址
	// img.src = 'https://ts2.cn.mm.bing.net/th?id=OIP-C.7sAjIeoQYWnXV_QnuYs1jQHaEK&w=333&h=187&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2'
	// }
	// 关闭弹出的提现和充值
	function closePaySuccess(date : any) {
		Payouts.value = false
		recharge.value = false
	}
	// 开启提现
	function acquisition() {
		Payouts.value = true
	}
	// 开启充值
	async function acquisition1() {
		recharge.value = true
		const { data } = await getCoinAddress('USDT')
		// console.log(data.address)
		address.value = data.address
	}
</script>

<style lang="scss" scoped>
	.banner {
		margin-top: 40px;
		width: 100%;
		height: 240px;
		display: flex;
		justify-content: center;
	}

	.banner_nr {
		margin: 0 auto;
		width: 686px;
		height: 240px;
		background-image: url(../../static/images/Home/homeSom/USDT.png);
		background-size: 100% 100%;
	}

	.banner_nr>view:nth-child(n+2) {
		color: white;
		margin: 16px 40px;
	}

	.banner_nr .textOne {
		font-size: 50px;
	}

	.banner_nr .textTwo {
		font-size: 26px;
	}

	.banner_top {
		width: 237px;
		height: 36px;
		margin-top: 24px;
		color: #100F42;
		font-size: 20px;
		display: flex;
		align-items: center;
		line-height: 36px;
		background: linear-gradient(90deg, #14D081 0%, rgba(20, 208, 129, 0) 100%);
	}

	.banner_top .safaty {
		width: 20px;
		height: 24px;
		margin: 0 8px 0 40px;
	}

	.trade {
		width: 686px;
		max-height: 84vh;
		margin: 0 auto;
		padding: 40px;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 32px;
		color: #ffffff;
		box-sizing: border-box;
		font-size: 36px;
		margin-top: 40px;

		.title {
			font-size: 36px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
			line-height: 50px;
			letter-spacing: 1px;
		}

		.list {
			padding-top: 12px;
			overflow-y: auto;

			.item {
				display: flex;
				justify-content: space-between;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				height: 80px;
				flex-wrap: wrap;
				align-items: center;
				flex-direction: row;
				align-content: center;

				.name {
					font-size: 26px;
				}

				.time {
					color: rgba(127, 127, 129, 1);
					font-size: 24px;
				}

				.num {
					font-size: 26px;

					&.correct {
						color: rgba(247, 181, 0, 1);
					}

					&.negative {
						color: rgba(0, 208, 185, 1);
					}
				}

				.tips {
					width: 100%;
					font-size: 24px;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: rgba(119, 120, 122, 1);
					line-height: 33px;
				}
			}
		}
	}

	.isolation {
		width: 100%;
		height: 180px;
	}

	.footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		background-color: #000;
		height: 168px;

		.btn {
			width: 327px;
			font-size: 28px;
			text-align: center;
			line-height: 88px;
			background-color: rgba(0, 208, 185, 1);
			color: #ffffff;
			height: 88px;
			border-radius: 16px;
		}

		.btn2 {
			width: 327px;
			font-size: 28px;
			text-align: center;
			line-height: 88px;
			background-color: #4E47FF;
			color: #ffffff;
			height: 88px;
			border-radius: 16px;
		}
	}

	@property --direc {
		syntax: '<angle>';
		inherits: false;
		initial-value: 0deg;
	}

	.Buy_now {
		width: 200px;
		height: 88px;
		color: #fff;
		margin-left: 0;
		// text-align: center;
		--direc: 0deg;
		background-image: linear-gradient(var(--direc), #99F5DA, #83AAE1, #6953E9, #A82DC0);
		animation: rotate 3s linear infinite;
		border-radius: 16px;
	}

	.Buy_now::before {
		content: '';
		position: absolute;
		inset: 4px;
		background-color: #000001;
		border-radius: inherit;
	}

	.Buy_now::after {
		content: 'TRC 2.0';
		font-size: 50px;
		position: absolute;
		inset: 4px;
		z-index: 1;
		margin-top: 10px;
	}

	@keyframes rotate {
		to {
			--direc: 360deg
		}
	}

	.ejectTitle {
		position: relative;
		height: 98px;
		background-color: rgba(34, 35, 36, 1);
		text-align: center;
		margin-left: 32px;
		margin-right: 32px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);

		span {
			height: 48px;
			font-size: 40px;
			font-family: MicrosoftYaHei;
			color: #FFFFFF;
			line-height: 98px;
		}

		image {
			// background-color: #A82DC0;
			position: absolute;
			width: 72px;
			height: 72px;
			top: 50%;
			right: 0;
			transform: translateY(-50%);
		}
	}

	.ejectCont {
		// height: 956px;
		width: 600px;
		margin: 0 auto;
		background-color: rgba(34, 35, 36, 1);

		.title {
			font-size: 24px;
			font-family: PingFangSC, PingFang SC;
			// font-weight: 400;
			color: #FFFFFF;
			line-height: 33px;
			margin-bottom: 16px;
			margin-top: 47px;
		}

		.bg {
			width: 600px;
			height: 662px;
			background: url("../../static/images/Home/bg.png") no-repeat;
			background-size: 100% 100%;
			text-align: center;
			margin-bottom: 60px;

			.top {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 88px;
				font-size: 24px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;

				span {
					width: 60%;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.copy {
					padding-left: 10px;
					width: 30px;
					height: 30px;
				}
			}

			.imgs {
				width: 280px;
				height: 280px;
				border-radius: 16px;
				margin: 0 auto;
				margin-top: 78px;
				background-color: #fff;
				overflow: hidden;

				image {
					width: 280px;
					height: 280px;
				}
			}

			.btns1 {
				width: 280px;
				height: 80px;
				background: #4E47FF;
				border-radius: 16px;
				text-align: center;
				margin: 0 auto;
				margin-top: 40px;
				font-size: 28px;
				font-family: PingFangSC, PingFang SC;
				color: #FFFFFF;
				line-height: 80px;
			}
		}

		.title {
			font-size: 24px;
			font-family: PingFangSC, PingFang SC;
			// font-weight: 400;
			color: #FFFFFF;
			line-height: 33px;
			margin-bottom: 16px;
			margin-top: 47px;
		}

		.ContItem {
			width: calc(100% - 42px);
			padding-left: 42px;
			height: 88px;
			background: rgba(255, 255, 255, 0.1);
			border-radius: 16px;
			border: 2px solid rgba(255, 255, 255, 0.6);
			font-size: 28px;
		}

		.tips {
			width: 100%;
			display: flex;
			justify-content: space-between;
			font-size: 24px;
			font-family: MicrosoftYaHei;
			color: #FFFFFF;
			line-height: 31px;
			opacity: 0.7;
			margin-top: 16px;
		}

		.tipsRed {
			font-size: 24px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #E4434C;
			line-height: 33px;
			text-align: right;
			text-decoration: underline;
			margin-top: 16px;
			margin-bottom: 40px;
		}
	}

	.bottoms {
		height: 120px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-shadow: 0px -1px 0px 0px rgba(255, 255, 255, 0.3);

		.bottomsNum {
			padding-left: 40px;
			font-size: 40px;
			font-family: PingFangSC, PingFang SC;
			color: #FFFFFF;
			line-height: 56px;
			letter-spacing: 1px;

			span {
				font-size: 20px;
			}
		}

		.bottomsBtn {
			margin-right: 32px;
			width: 280px;
			height: 80px;
			background: #00D0B9;
			border-radius: 16px;
			text-align: center;
			line-height: 80px;
			color: #fff;
			font-size: 28px;
		}

	}

	::v-deep #pass {
		text-align: left !important;
	}

	::v-deep .van-field {
		height: 88px;
		background: rgba(255, 255, 255, 0.10);
		border: 2px solid rgba(255, 255, 255, 0.6);
		border-radius: 16px;
		color: #fff;
	}

	::v-deep .van-field__control {
		color: #fff !important;
		line-height: 66px !important;
		text-align: center;
	}

	.equipmentCode {
		width: 91%;
		margin: 40px auto 0 auto;
		color: #fff;
		font-size: 24px;

		.Remaining {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin: 0 0 16px 0;

			.greenColor {
				color: rgba(0, 208, 185, 1);
			}
		}

		.steep {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			--van-stepper-input-font-size: 28px
		}
	}
</style>